<template>
  <scroll-bar>
    <!--{{$route.path.split('/')[1] !== 'DeepInsight' && $route.path.split('/')[1] !== 'SMBIntelligence' && $route.path.split('/')[1] !== 'Comparison' ? '/'+$route.path.split('/')[1]+'/index' : $route.path}}-->
    <div class="arrrow" @click="toggleSideBar">
      <i class="iconfont icon-liebiaoshouqi" :class="{rotate: !sidebar.opened, 'open-ml': sidebar.opened}"></i>
      <span v-show="sidebar.opened" class="title">{{$t('route.Fold')}}</span>
    </div>
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse" unique-opened @open="open">
      <sidebar-item :routes="outside_routers"></sidebar-item>
    </el-menu>
  </scroll-bar>
</template>

<script>
  import {mapGetters} from 'vuex'
  import SidebarItem from './SidebarItem'
  import ScrollBar from '@/components/ScrollBar'

  export default {
    data() {
      return {
        activeMenu: ''
      }
    },
    components: {SidebarItem, ScrollBar},
    methods: {
      toggleSideBar() {
        this.$store.dispatch('toggleSideBar')
      },
      open(index) {
        // if (index === '/Overview' || index === '/CustomerProfile' || index === '/DeepInsight') {
        //   this.$router.push({path: `${index}Introduction`})
        // }
        // 介绍页修改
        if (index === '/CustomerProfile' || index === '/BusinessInsight' || index === '/DeepInsight' || index === '/DataInfo'||index==='/DataTools') {
          this.$router.push({path: `${index}Introduction`})
        }
      },
      //使收起状态下过长的二级菜单可以滚动
      // hideMoreMenus() {
      //   let ul = document.getElementsByClassName('el-menu')[0].getElementsByClassName('el-menu')[2]
      //   let htmldom = document.getElementsByTagName('html')[0]
      //   ul.style.maxHeight = '500px'
      //   ul.style.setProperty('width', '200px', 'important')
      //   ul.style.overflowY = 'scroll'
      //   ul.style.overflowX = 'hidden'
      //   // ul.onmouseover = function () {
      //   //   htmldom.style.height = '100vh'
      //   //   htmldom.style.overflow = 'hidden'
      //   // }
      //   // ul.onmouseout = function () {
      //   //   htmldom.style.height = ''
      //   //   htmldom.style.overflow = ''
      //   // }
      //   ul.onmouseenter = function () {
      //     ul.onmousewheel = function (e) {
      //       // e.preventDefault()
      //       e.stopPropagation()
      //     }
      //   }
      // },
      getMenusList() {
        // const _this = this
        // if (!this.sidebar.opened) {
        //   this.hideMoreMenus()
        //   let menus = document.getElementsByClassName('el-submenu')
        //   let len
        //   if (menus.length > 2) {
        //     len = 3
        //   } else {
        //     len = menus.length
        //   }
        //   let alink = []
        //   for (let i = 0; i < len; i++) {
        //     let alinkItem = menus[i].getElementsByTagName('a')
        //     for (let j = 0; j < alinkItem.length; j++) {
        //       alink.push(menus[i].getElementsByTagName('a')[j])
        //     }
        //     menus[i].onclick = function () {
        //       let link = this.getElementsByTagName('a')[0].getAttribute('href')
        //       link = `/${link.split('/')[1]}Introduction`
        //       _this.$router.push({path: link})
        //     }
        //   }
        //   for (let i in alink) {
        //     alink[i].onclick = function (e) {
        //       e.stopPropagation()
        //     }
        //   }
        // }
      },
      chooseMenu() {
        if (this.$route.path === '/CustomerProfile/filter' || this.$route.path === '/CustomerProfile/filterResult') {
          this.activeMenu = '/CustomerProfile/filter'
        } else if (this.$route.path === '/CustomerProfile/MachineQuery' || this.$route.path === '/CustomerProfile/searchResult2') {
          this.activeMenu = '/CustomerProfile/MachineQuery'
        } else {
          this.activeMenu = this.$route.path.split('/')[1] !== 'DeepInsight' && this.$route.path.split('/')[1] !== 'SMBIntelligence' && this.$route.path.split('/')[1] !== 'Comparison' && this.$route.path.split('/')[1] !== 'ReferenceInfo' ? '/' + this.$route.path.split('/')[1] + '/index' : this.$route.path
        }
      }
    },
    computed: {
      ...mapGetters([
        'permission_routers',
        'outside_routers',
        'sidebar'
      ]),
      isCollapse() {
        return !this.sidebar.opened
      }
    },
    watch: {
      '$route'() {
        this.chooseMenu()
      },
      'sidebar.opened': function () {
        setTimeout(() => {
          this.getMenusList()
        }, 500)
      }
    },
    mounted() {
      this.chooseMenu()
      this.getMenusList()
    }
  }
</script>

<style scoped lang="scss">
  .rotate {
    transform: rotate(180deg);
    margin-left: 10px;
  }

  .open-ml {
    margin-left: 20px;
  }

  .arrrow {
    height: 50px;
    cursor: pointer;
    /*background: #2f2f72;*/
    /*background: #0177c0;*/
    background: #313131;
    overflow: hidden;
    user-select: none;
    /*border-bottom: 1px solid #e2e2e2;*/
    span, i {
      color: #fff;
      display: inline-block;
      line-height: 50px;
    }
    span {
      margin-left: 5px;
      font-size: 14px;
    }
  }
</style>
